<template>
	<div class="film_city train" v-if="isShow">
		<header>
			<div @click="clickReturn" class="film_city_return">
				<img src="../../../assets/film/fanhui@3x.png" alt=""/>
			</div>
			<div class="film_city_search">
				<img src="../../../assets/film/search.png" alt="" />
				<input type="text" placeholder="城市，车站的中文或拼音" v-model="searchValue" @input="search" />
			</div>
		</header>
		<div class="film_city_zhan"></div>
		<div class="film_city_content" v-if="searchValue==''">
			<div class="film_city_city">
				<div class="film_city_map" ref="now"></div>
				<div class="film_city_city_title">
					当前定位城市
				</div>
				<div class="film_city_city_cityName">
					<div @click="changeCity(cityName)">{{cityName}}</div>
				</div>
			</div>
			<div class="film_city_city" v-if="historyCity.length">
				<div class="film_city_map" ref="history"></div>
				<div class="film_city_city_title">
					历史搜索：
				</div>
				<div class="film_city_city_cityName">
					<div @click="changeCity(item)" v-for="item in historyCity">{{item}}</div>
					<div v-for="item in 4" style="height: 0; margin-bottom: 0;"></div>
				</div>
			</div>
			<div class="film_city_city">
				<div class="film_city_map" ref="hot"></div>
				<div class="film_city_city_title">
					热门搜索：
				</div>
				<div class="film_city_city_cityName">
					<div v-for="item in hotCityList" @click="changeCity(item.name || item.fromStation)">{{item.name || item.fromStation}}</div>
					<div v-for="item in 4" style="height: 0; margin-bottom: 0;"></div>
				</div>
			</div>
		</div>
		<div class="film_city_list" v-if="searchValue==''">
			<div v-for="item,key in cityListMsg">
				<div :ref="item.letter" class="film_city_map"></div>
				<div class="film_city_list_letter">{{item.letter}}</div>
				<div v-for="val,index in item.cityList" class="film_city_list_name">
					<div @click="changeCity(val.name)">
						{{val.name}}
					</div>
				</div>
			</div>
		</div>
		<!--搜索用-->
		<div v-else>
			<div v-for="item in searchList" class="film_city_list_name" v-show="searchList.length">
				<div @click="changeCity(item.name)">{{item.name}}</div>
			</div>
			<div class="film_city_search_null" v-if="!searchList.length">抱歉，暂时没有找到相关的城市</div>
		</div>
		<!--侧边字母-->
		<div v-if="searchValue==''" class="film_city_nav">
			<div :class="{film_city_nav_active : nowNav == 'now'}" @click="skip('now')">当前</div>
			<div :class="{film_city_nav_active : nowNav == 'history'}" @click="skip('history')">历史</div>
			<div :class="{film_city_nav_active : nowNav == 'hot'}" @click="skip('hot')">热门</div>
			<div v-for="item,key in cityList" :class="{film_city_nav_active : nowNav == item.letter}" @click="skip(item.letter)">
				{{item.letter}}
			</div>
		</div>
	</div>
</template>
<style scoped>
	/*顶部搜索*/
	
	.film_city {
		background-color: #F4F5F9;
	}
	
	.film_city_zhan {
		height: 88px;
	}
	
	.film_city>header {
		height: 88px;
		display: flex;
		padding: 0 30px;
		justify-content: flex-start;
		align-items: center;
		background-color: #fff;
		width: 100%;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 100;
	}
	
	.film_city_return {
		width: 25px;
		height: 44px;
		margin-right: 28px;
	}
	
	.film_city_return > img {
		width: 100%;
		height: 100%;
	}
	
	.film_city_search {
		width: 540px;
		height: 60px;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
	}
	
	.film_city_search>input {
		width: 100%;
		height: 100%;
		border-radius: 30px;
		box-sizing: border-box;
		border: 0;
		background-color: #F6F7FA;
		padding-left: 65px;
		outline: none;
	}
	
	.film_city_search>img {
		position: absolute;
		top: 16px;
		left: 18px;
		width: 27px;
		height: 27px;
		font-size: 26px;
	}
	/*城市信息*/
	
	.film_city_content {
		margin-top: 68px;
	}
	
	.film_city_city {
		padding: 0 28px;
		font-size: 28px;
		color: #8a8a8a;
		padding-right: 88px;
	}
	
	.film_city_city>.film_city_map {
		position: relative;
		top: -100px;
		left: 0;
	}
	
	.film_city_city_title {
		margin-bottom: 32px;
	}
	
	.film_city_city_title {
		margin-bottom: 32px;
	}
	
	.film_city_city_cityName {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.film_city_city_cityName>div {
		width: 146px;
		height: 55px;
		background-color: #fff;
		border-radius: 8px;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 26px;
		color: #333333;
		margin-bottom: 30px;
	}
	
	.film_city_list>div>.film_city_map {
		position: relative;
		top: -88px;
		left: 0;
	}
	
	.film_city_list_letter {
		height: 48px;
		padding-left: 27px;
		width: 100%;
		box-sizing: border-box;
		color: #4c4c4c;
		font-size: 28px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		background-color: #E8E9EF;
	}
	
	.film_city_list_name {
		background-color: #fff;
		padding-left: 70px;
	}
	
	.film_city_list_name>div {
		height: 70px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 2px solid #959595;
		font-size: 26px;
		color: #333333;
	}
	
	.film_city_list_name:last-child>div {
		border: 0;
	}
	
	.film_city_search_null {
		display: flex;
		justify-content: center;
		font-size: 28px;
		color: #000;
		/*background-color: #fff;*/
		padding-top: 15px;
	}
	
	.film_city_nav {
		position: fixed;
		top: 160px;
		right: 12px;
		bottom: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 36px;
		box-sizing: border-box;
		color: #8a8a8a;
	}
	
	.film_city_nav>div:nth-child(-n+3) {
		color: #333333;
	}
	
	.film_city_nav>.film_city_nav_active {
		color: #81d4d3!important;
	}
</style>
<style type="text/css">
	body {
		background: #F4F5F9!important;
	}
</style>
<script>
	import hotCityList from "./trainHotCity.js"; //抢票加速信息
	export default {
		data() {
			return {
				cityName: "", //获取城市
				cityList: [], //城市列表
				searchValue: "", //搜索内容
				hotCityList: [],//热门城市
				searchList: [],//搜索列表
				nowNav: "当前",//侧边字母
				clickFlag:true,//防连击
				isChangTicket:false,//是否为改签
				historyCity:[],//历史
				isShow:false,//页面展示
				cityListMsg:[],//展示的城市
			}
		},
		mounted() {
			this.cityName = (this.$store.state.common.cityinfo && this.$store.state.common.cityinfo.cityName) || "北京";
			this.$route.query.isChangTicket ? (this.isChangTicket = true) : (this.isFrom = this.$route.query.isFrom ? Number(this.$route.query.isFrom) : 1);
			this.$store.state.train.trainStorage.trainCityList ? (this.cityList = this.$store.state.train.trainStorage.trainCityList) : this.getCityList();
			this.hotCityList = hotCityList;
			this.$store.state.train.trainStorage.historyCity ? (this.historyCity = this.$store.state.train.trainStorage.historyCity) : [];
		},
		methods: {
			filmReturn() { //回退	
				this.$router.go(-1);
			},
			getCityList() { //获取城市列表
				var param = {};
				this.$loading.show();
				this.$http.post(this.$baseUrl.baseurl + "tctrain/train/trainStationList", param).then((res) => {
					this.cityList = this.changeCityList(res.data.Result.stations); //处理城市数据
//					this.hotCityList = res.data.Result.hotStations; //处理城市数据
					var trainStorage = JSON.parse(JSON.stringify(this.$store.state.train.trainStorage));
					trainStorage.trainCityList = this.cityList;
//					trainStorage.trainHotCityList = this.hotCityList;
					this.$store.commit('TRAINSTORAGE', trainStorage);
					this.isShow = true;//页面展示
					this.$loading.hide();
				}).catch((err) => {
					this.$loading.hide();
					console.log(err);
				});
			},
			changeCityList(arr) { //处理城市格式的函数
				var cityList = arr.sort((one, two) => { //城市排序
					var flag = 0;
			      	(one.stationCode < two.stationCode) && (flag = -1);
			      	(one.stationCode > two.stationCode) && (flag = 1);
			      	return flag;
				});
				return this.getCityObj(cityList);
			},
			getCityObj(arr) { //处理城市首字母构建城市对象
				var arrList = []; //数据结果的数组
				var arrX = []; //临时存储数组
				var letterArr = []; //字母项
				arr.forEach((item, key) => {
					arrX.push(item);
					if((key > 0) && (arr[key - 1].stationCode[0] != item.stationCode[0])) {
						var x = arrX.pop(); //删除最后一项
						var obj = {
							letter: arr[key - 1].stationCode[0].toUpperCase(), //小写转大写
							cityList: arrX,
						};
						arrList.push(obj);
						arrX = [x]; //清空放入
						letterArr.push(arr[key - 1].stationCode[0].toUpperCase()); //字母项放入
					} else if(key == arr.length - 1) {
						var obj = {
							letter: item.stationCode[0].toUpperCase(),
							cityList: arrX,
						};
						arrList.push(obj);
						letterArr.push(item.stationCode[0].toUpperCase()); //字母项放入
					};
				});	
				return arrList;
			},
			search() { //搜索
				var searchValue = this.searchValue;
				if(searchValue.length > 0) { //筛选过滤
					var searchList = [];
					this.cityList.forEach(function(item, index) {
						item.cityList.forEach(function(val, key) {
							(val.name.indexOf(searchValue) >= 0 || val.stationCode.toLowerCase().indexOf(searchValue) >= 0) && (searchList.push(val));
						})
					});
					this.searchList = searchList;
				} else {
					this.searchList.length = 0;
				};
			},
			skip(str) {
				if(!this.clickFlag) return;
				this.nowNav = str;
				this.clickFlag = false;
				//动画跳转
				let top = (this.$refs[str].offsetTop || this.$refs[str][0].offsetTop); //div 高度
				let distance = document.documentElement.scrollTop || document.body.scrollTop; //滚动条高度;
				let dis = top - distance; //需要移动的距离
				//每次移动的距离
				let step = dis / 50;
				var timer = setInterval(function() {
					var flag = (dis > 0) ? (distance < top) : (distance > top);
					if(flag) {
						distance += step;
						document.body.scrollTop = distance;
						document.documentElement.scrollTop = distance;
					} else {
						document.body.scrollTop = top;
						document.documentElement.scrollTop = top;
						this.clickFlag = true;
						clearInterval(timer);
					};
				}.bind(this), 10);
			},
			changeCity(cityName) { //变更当前城市
				this.$loading.show();
				var timer = setTimeout(function(){	
					clearTimeout(timer);
					var trainStore = JSON.parse(JSON.stringify(this.$store.state.train.trainStore));
					if(this.isChangTicket) { //改签
						trainStore.changeMessage.isChangeStation = (trainStore.changeMessage.toStation != cityName);
						trainStore.changeMessage.toStationName = cityName;
					} else {//普通
						this.isFrom ? (trainStore.fromCityName = cityName) : (trainStore.toCityName = cityName); //城市
					};
					this.$store.commit('TRAINSTORE', trainStore);//修改城市
					this.$router.go(-1);
				}.bind(this),0);
				var timers = setTimeout(function(){		
					clearTimeout(timers);
					var trainStorage = JSON.parse(JSON.stringify(this.$store.state.train.trainStorage));//添加历史
					var index = this.historyCity.indexOf(cityName);
					(index > -1) && this.historyCity.splice(index,1);
					this.historyCity.unshift(cityName);
					(this.historyCity.length > 3) && (this.historyCity.length = 3);
					trainStorage.historyCity = this.historyCity;
					this.$store.commit('TRAINSTORAGE', trainStorage);
					this.$loading.hide();
				}.bind(this),100);
			},
			clickReturn() { //回退	
				this.$router.go(-1);
			},
		},
		created() {	
			
		},
		watch: { //监听放置
			cityList(){
				this.cityListMsg = this.cityList.slice(0, 2);
				var timer = setTimeout(function(){
					clearTimeout(timer);
					this.cityListMsg = this.cityList;
				}.bind(this),100);
			},
			cityListMsg(){
				this.isShow  || this.$nextTick(function(){
					this.isShow = true
    			}.bind(this));
			}
		},
		filters: { //过滤

		},
		components: {},
		computed: {}
	};
</script>